<section class="gh-canvas gh-canvas-sticky">
    <GhCanvasHeader class="gh-canvas-header sticky break tablet post-header">
        <GhCustomViewTitle @title="Pages" @query={{reset-query-params "posts"}} />

        <section class="view-actions">
            <PostsList::ContentFilter
                @currentUser={{this.session.user}}
                @selectedType={{this.selectedType}}
                @availableTypes={{this.availableTypes}}
                @onTypeChange={{this.changeType}}
                @selectedVisibility={{this.selectedVisibility}}
                @availableVisibilities={{this.availableVisibilities}}
                @onVisibilityChange={{this.changeVisibility}}
                @selectedAuthor={{this.selectedAuthor}}
                @availableAuthors={{this.availableAuthors}}
                @onAuthorChange={{this.changeAuthor}}
                @selectedTag={{this.selectedTag}}
                @availableTags={{this.availableTags}}
                @onTagChange={{this.changeTag}}
                @selectedOrder={{this.selectedOrder}}
                @availableOrders={{this.availableOrders}}
                @onOrderChange={{this.changeOrder}}
            />

            <LinkTo @route="editor.new" @model="page" class="gh-btn gh-btn-primary view-actions-top-row" data-test-new-page-button={{true}}><span>New page</span></LinkTo>
        </section>
    </GhCanvasHeader>

    <section class="view-container content-list">
        <div class="{{if this.feature.memberAttribution 'gh-list-sticky'}}">
            <ol class="pages-list gh-list {{unless this.postsInfinityModel "no-posts"}} {{if this.feature.memberAttribution 'feature-memberAttribution'}}">
                {{#each this.postsInfinityModel as |page|}}
                    <PostsList::ListItem
                        @post={{page}}
                        data-test-page-id={{page.id}}
                    />
                {{else}}
                    <li class="no-posts-box">
                        <div class="no-posts">
                            {{#if this.showingAll}}
                                {{svg-jar "pages-placeholder" class="gh-pages-placeholder"}}
                                <h4>Tell the world about yourself.</h4>
                                <LinkTo @route="editor.new" @model="page" class="gh-btn gh-btn-green">
                                    <span>Create a new page</span>
                                </LinkTo>
                            {{else}}
                                <h4>No pages match the current filter</h4>
                                <LinkTo @route="pages" @query={{hash type=null author=null tag=null}} class="gh-btn">
                                    <span>Show all pages</span>
                                </LinkTo>
                            {{/if}}
                        </div>
                    </li>
                {{/each}}
            </ol>
        </div>

        <GhInfinityLoader
            @infinityModel={{this.postsInfinityModel}}
            @scrollable=".gh-main"
            @triggerOffset={{1000}} />
    </section>

    {{outlet}}
</section>
